<template>
  <div :style="{width:'100%',height:'100%'}" ref="homeEch"></div>
</template>

<script>
export default {
  name: "Age",
  data() {
    return {
      data: [],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 年龄比例接口
    echarts() {
      let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
        let json = '{"code":0,"data":{"title":"物资领用类型占比","subtitle":"总览","names":["资质申请","用印申请","物资领用申请","用车申请","领油卡","借走印章","借走资质"],"list":[{"name":"物质类型","value":[128,1165,316,581,155,18,15]}]}}'
        let obj = JSON.parse(json)
        let data = obj.data
        let valuelist = data.list[0].value.map(
            function(item,index){
               return {
                   name:data.names[index],
                   value:item,
                   itemStyle: {
                    normal: {
                        color: that.$colors[index]
                    }
                }
               }
            }
        )
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend:{
              data:data.names,
              left:0,
              top:0,
              orient:'vertical',
              textStyle:{
                  color:'#fff'
              }
            },
            calculable: true,
            series: [
                {
                    name: '次数',
                    type: 'pie',
                    data:valuelist,
                    center:['60%','50%']
                }
            ]
        };
        myChart.setOption(option);
    }
    
  }
};
</script>

<style>
</style>